import './style.css'
import './card.css'

const app = document.querySelector('#app') as HTMLDivElement

function createPaper(value: string): HTMLDivElement {
  const cardTop = document.createElement('div')
  const cardBottom = document.createElement('div')
  const cardBox = document.createElement('div')
  cardTop.classList.add('card', 'card-top')
  cardBottom.classList.add('card', 'card-bottom')
  cardTop.innerText = value
  cardBottom.innerText = value
  cardBox.append(cardTop)
  cardBox.append(cardBottom)
  cardBox.classList.add('card-box')
  return cardBox
}

function fillZero(value: number): string {
  return value < 10 ? '0' + value : value.toString()
}

function getNowDateTime(): string[] {
  const date = new Date()
  const year = date.getFullYear()
  const month = fillZero(date.getMonth() + 1)
  const day = fillZero(date.getDate())
  const hour = fillZero(date.getHours())
  const minute = fillZero(date.getMinutes())
  const second = fillZero(date.getSeconds())
  return (year + month + day + hour + minute + second).split('')
}

function animation() {
  setInterval(() => {
    app.innerHTML = ''
    initClock()
  }, 1000)
}

function initClock() {
  const nowDateTime = getNowDateTime()
  nowDateTime.map((item) => {
    const card = createPaper(item)
    app.appendChild(card)
  })
  animation()
}

initClock()
